<template>
  <div>
    <div style="display: flex; align-items: center;">
      <my-card>
        <template v-slot:header>
          <h2>Custom Header</h2>
        </template>
        <template v-slot:body>content</template>
        <template v-slot:footer>Footer</template>
      </my-card>

      <my-card>
        <template v-slot:header>Card name</template>
        <template v-slot:body>
          <div>List item 1</div>
          <div>List item 2</div>
          <div>List item 3</div>
          <div>List item 4</div>
        </template>
        <template v-slot:footer>Footer</template>
      </my-card>

      <my-card>
        <template v-slot:header>Food</template>
        <template v-slot:body>
          <img src="https://picsum.photos/200" />
        </template>
      </my-card>
    </div>

    <div class="tool-btn">
      <div class="btn">按钮</div>
      <MyButton type="danger" size="medium" isRound="true" isNaive="true" @myclick="faadd">
        <template v-slot:icon>
          <i class="iconfont icon-shanchu" />
        </template>
        删除
      </MyButton>
      <MyButton type="primary" size="medium" isNaive="true">
        <input type="checkbox" />添加
      </MyButton>
      <MyButton type="success" size="mini">
        <template v-slot:footer>
          <i class="iconfont icon-queding" />
        </template>
        <span style="color:red">确定</span>
      </MyButton>
      <div>
        <my-input v-model="searchkey" @myinputvalue="change" />
        <span>{{searchkey}}</span>
      </div>
      <div>
        <my-input :value="val" @myinputvalue="(param)=>val = param" />
        <span>{{val}}</span>
      </div>

      <input v-model="a" />
      <span>{{a}}</span>
    </div>
    <MyInputNumber v-model="num" @change="handleChange" ></MyInputNumber>
    <Tag/>
  </div>
</template>

<script>
import MyButton from "./MyButton.vue";
import MyInput from "./MyInput.vue";
import MyCard from "./MyCard.vue";
import MyInputNumber from './MyInputNumber.vue';
import Tag from "./homework/Tag.vue";
export default {
  name: "Panel",
  components: { MyButton, MyInput, MyCard ,MyInputNumber, Tag},
  methods: {
    faadd() {
      console.log("父组件的方法执行");
    },
    change(b) {
      console.log("父组件的change");
      this.searchkey = b;
    },
    handleChange(a){
      this.num=a
      console.log(this.num)
    }
  },
  data() {
    return {
      a: "",
      searchkey: "",
      val: "",
      num:''
    };
  }
};
</script>

<style scoped>
.tool-btn {
  display: flex;
  padding: 20px;

  align-items: center;
}
.btn {
  line-height: 1;
  white-space: nowrap;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}
</style>